import React from 'react';
import { Carousel } from 'antd';
import { WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
window._t = {};

//多图元素
class ImgSlideCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ewidth: 0,
            eheight: 0,
        }
        _t[props.eid+'_'+props.isSetting] = 0;
        this.aClick = this.aClick.bind(this);
        this.autoCarousel = this.autoCarousel.bind(this);
        this.initSlide = this.initSlide.bind(this);
    }

    componentWillUnmount(){
        try {
            clearInterval(_t[this.props.eid+'_'+this.props.isSetting]);
        } catch (e) {

        }
    }
    componentDidMount() {

        const { eid, data, isSetting } = this.props;
        const {imgsrclist,imgdesclist,height,displaydesc,cellwidth,autoSwitchTime} = data;
        let rowcount = parseInt(data.rowcount);
        try {
            clearInterval(_t[eid+'_'+isSetting], this.initSlide(eid, rowcount,autoSwitchTime));
        } catch (e) {

        }
        let mleft = "-"+(18*rowcount/2)+'px';
        $('#banner_'+eid+"_"+isSetting+' ul').css('margin-left',mleft);
        this.setState({
            ewidth: $(`#content_${eid}`).width(),
            eheight: $(`#content_${eid}`).height(),
        });
    }
    aClick (link = '') {
        if(link != ''){
            window.open(link);
        }else return false;
    }

    autoCarousel(rowcount,autoSwitchTime,_n){
        const { eid, isSetting } = this.props;
        if (rowcount > 1) {
            _t[eid+'_'+isSetting] = setInterval(function() {
                _n = _n >= (rowcount - 1) ? 0 : ++_n;
                $("#banner_"+eid+"_"+isSetting+" li").eq(_n).trigger('click');
            }, autoSwitchTime);
        }
    }

    initSlide(eid,rowcount,autoSwitchTime) {
        const { isSetting } = this.props;
        let _n = 0;
        let _count = 0;

        var temp= rowcount;
        _count = $("#banner_list_"+eid+"_"+isSetting+" a").length;
        $("#banner_list_"+eid+"_"+isSetting+" a:not(:first-child)").hide();
        $("#banner_info_"+eid+"_"+isSetting).click(function() {});
        $("#banner_"+eid+"_"+isSetting+" li, #banner_info_"+eid+"_"+isSetting+" .slidebox_info_item").click(function() {
            var i = $(this).attr("data-index") - 1; //
            _n = i;
            if (i >= rowcount) return;
            $("#banner_info_"+eid+"_"+isSetting).unbind().click(function() {});
            $("#banner_list_"+eid+"_"+isSetting+" a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(500);
            document.getElementById("banner_"+eid+"_"+isSetting).style.background = "";
            $("#banner_"+eid+"_"+isSetting+" li").eq(i).toggleClass("on");
            $("#banner_info_"+eid+"_"+isSetting).find(".slidebox_info_item").removeClass("slidebox_info_item_slt");
            $("#banner_info_"+eid+"_"+isSetting).find(".slidebox_info_item").eq(i).addClass("slidebox_info_item_slt");

            $(this).siblings().removeAttr("class");
        });
        if (rowcount > 1) {
            //_t = setInterval(showAuto.bind(this,eid), autoSwitchTime);
            _t[eid+'_'+isSetting] = setInterval(function() {
                _n = _n >= (rowcount-1) ? 0 : ++_n;
                $("#banner_"+eid+"_"+isSetting+" li").eq(_n).trigger('click');
            }, autoSwitchTime);
        }
        $("#banner_"+eid+"_"+isSetting).hover(() => {
            clearInterval(_t[eid+'_'+isSetting])
            $("#settingico_"+eid).parent().show();
        }, () => {
            this.autoCarousel(rowcount,autoSwitchTime,_n);
        } );
    }


    render() {
        const { eid, data, isSetting } = this.props;
        const { ewidth, eheight } = this.state;
        const { imgsrclist, imgdesclist, height = '0', rowcount, displaydesc, cellwidth, type, imgAddress, fontSize = '16'} = data;
        var style = {fontFamily:'微软雅黑'};
        var style1 = {display:'none'};
        if(displaydesc != 1){
            style = {fontFamily:'微软雅黑',display:'none'};
            style1={};
        }
        var col1 = new Array;
        var col2 = new Array;
        for (var j=0; j<parseInt(rowcount); j++) {
            col1.push(<col width={`${cellwidth}%`}/>);
            col2.push(<col width="1px"/>);
        }
        let liHtml = new Array;
        let aHtml = new Array;
        let dHtml = new Array;
        imgdesclist.map((item,i)=>{
            let astyle = {
                background:'url('+imgsrclist[i]+') center center no-repeat',
                backgroundSize:'100% 100%',
                height:'100%'
            }
            switch(type){
                case 'adapt':
                    astyle = {
                        background:'url('+imgsrclist[i]+') center center no-repeat',
                        backgroundSize:'auto 100%',
                        height:'100%'
                    }
                    break;
                case 'fill':
                    astyle.backgroundRepeat = 'no-repeat';
                    astyle.backgroundSize = 'cover';
                    astyle.width = ewidth;
                    astyle.height = eheight;
                    break;
                case 'tile':
                    astyle = {
                        background:'url('+imgsrclist[i]+') repeat',
                        height:'100%'
                    }
                    break;
                case 'center':
                    astyle = {
                        background:'url('+imgsrclist[i]+')',
                        backgroundPosition: 'center center',
                        backgroundRepeat: 'no-repeat'
                    }
                    break;
                default:
                    astyle.backgroundRepeat = 'no-repeat';
                    astyle.backgroundSize = '100% 100%';
                    astyle.mozBackgroundSize = '100% 100%';
                    break;
            }
            liHtml.push(<li className={i===0?'on':''} data-index={i+1}></li>);
            aHtml.push(<a href="javascript:void(0)" onClick={()=>this.aClick(imgAddress[i])}>
                {/*aHtml.push(<a href={} target="_blank">*/}
                <div className="slidebox_list_item" style={astyle}>
                </div>
            </a>);
            dHtml.push(<td>
                <div className={`slidebox_info_item ${i === 0 ? 'slidebox_info_item_slt':''}`} style={{fontSize: fontSize+'px'}} data-index={i+1}>
                    {item}
                </div>
            </td>);
        });
        return <div id={`imgslide_${eid}`} style={{width: '100%',height: height+ 'px'}}>
            <div id={`banner_${eid}_${isSetting}`} className="slidebox_block" style={{height: '100%'}}>
                <div id={`banner_info_${eid}_${isSetting}`} className="slidebox_info" style={style}>
                    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
                        <colgroup>
                            {col1}

                        </colgroup>
                        <tbody>
                        <tr>
                            {dHtml}
                        </tr>
                        </tbody>
                    </table>
                </div>
                <ul style={style1}>
                    {liHtml}
                </ul>
                <div id={`banner_list_${eid}_${isSetting}`} className="slidebox_list" style={{height: '100%'}}>
                    {aHtml}
                </div>
            </div>
        </div>
    }
}

import { WeaErrorPage, WeaTools } from 'ecCom';
class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return (
            <WeaErrorPage msg={hasErrorMsg?this.props.error:getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
        );
    }
}
ImgSlideCom = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(ImgSlideCom);
export default ImgSlideCom;

